<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <script src="__STATIC__/js/base.js"></script>
    <title>买卖执照</title>
    <link rel="stylesheet" href="__STATIC__/css/base.css">
    <script src="__STATIC__/js/jquery-1.11.1.min.js"></script>
    <!--<script src="js/index.js"></script>-->
</head>
<body>
<section class="wrap">
    <div class="search">
        <div id="validation">
            <input type="text" class="input-box" placeholder="请输入搜索关键字" value="">
            <div class="refer" onclick="search()"></div>
        </div>
        <div class="cancel">取消</div>
    </div>
    <script>
        $(".cancel").click(function () {
            $(".input-box").val("");
        })
    </script>
    <div id="filter">
       <ul class="tab">
           <li  class="tab-item " id="location" style="width: 50%">
                   <span>位置</span>
                   <img src="__STATIC__/images/arrow_down.png"/>
           </li>
           <li  class="tab-item" id="stamp" style="width: 50%">
               <span>行业特点</span>
               <img src="__STATIC__/images/arrow_down.png"/>
           </li>
       </ul>
        <script>
            $(function(){
                $('.tab-item').on('click',function(){
                    if($(this).hasClass('active')){
                        $(".line").hide();
                        $('.tab-item').removeClass('active');
                        $('.tab-item').children('img').attr('src','__STATIC__/images/arrow_down.png');
                        $('#selected div').removeClass('active_location');
                    }else {
                        $(".line").show();
                        $('#selected div').removeClass('active_location');
                        $('.tab-item').removeClass('active');
                        $('.tab-item').children('img').attr('src','__STATIC__/images/arrow_down.png');
                        $(this).addClass('active');
                        $(this).children('img').attr('src','__STATIC__/images/selected.png');
                        var selected = $(this).attr('id');
                        if(selected == 'location'){
                            $('#filter #selected .sel-location ').addClass('active_location');
                        }
                        if(selected == 'stamp'){
                            $('#filter #selected .sel-stamp ').addClass('active_location');
                        }
                    }
                });
                $('#selected .sel-stamp ul li').on('click',function(){
                    $(this).parent().children('li').removeClass('active');;
                    $(this).addClass('active');
                    $(this).parent().parent().removeClass('active_location');
                    $('.tab-item').children('img').attr('src','__STATIC__/images/arrow_down.png');
                    $('.tab-item').removeClass('active');
                    $(".line").hide();
                    var className  = $(this).parent().parent().attr('class');
                    if(className == 'sel-stamp'){
                        $('#stamp span').html($(this).children('span').text());
                    }
                    search()

                });
                $('#selected .sel-location .sel-province ,#selected .sel-location .sel-city ').on('click','li',function(){
                    $(this).parent().children('li').removeClass('active');;
                    $(this).addClass('active');
                });
                $('#selected .sel-location .sel-area ').on('click','li',function(){
                    $(".line").hide();
                    $('.tab-item').children('img').attr('src','__STATIC__/images/arrow_down.png');
                    $('.tab-item').removeClass('active');
                    $(this).parent().children('li').removeClass('active');;
                    $(this).addClass('active');
                    $(this).parent().parent().removeClass('active_location');
                    $('#location span').html($(this).children('span').text());
                    search()
                });
            });
        </script>
        <div class="line"></div>
        <div id="selected">
            <div class="sel-location">
                <ul class="sel-province">
                    {volist name="province" id="v"}
                    <li><span onclick="getCity($(this).attr('data-value'));" data-value="{$v.areaId}">{$v.areaName}</span></li>
                    {/volist}
                </ul>
                <ul  class="sel-city">
                    {volist name="city" id="v"}
                    <li><span onclick="getArea($(this).attr('data-value'));" data-value="{$v.areaId}">{$v.areaName}</span></li>
                    {/volist}
                </ul>
                <ul class="sel-area">
                    {volist name="area" id="v"}
                    <li><span data-value="{$v.areaId}">{$v.areaName}</span></li>
                    {/volist}
                </ul>
            </div>

            <div class="sel-stamp">
                <ul >
                    <li ><span>许可证</span></li>
                    <li><span>支付牌照</span></li>
                    <li><span>公募基金牌照</span></li>
                    <li><span>私募基金牌照</span></li>
                    <li><span>股份</span></li>
                    <li><span>金融</span></li>
                    <li><span>担保</span></li>
                    <li><span>典当</span></li>
                    <li><span>投资管理</span></li>
                    <li><span>基金管理</span></li>
                    <li><span>投资</span></li>
                    <li><span>投资顾问</span></li>
                    <li><span>投资控股</span></li>
                    <li><span>企业管理</span></li>
                    <li><span>集团</span></li>
                    <li><span>物流</span></li>
                    <li><span>客运</span></li>
                    <li><span>货运</span></li>
                    <li><span>租赁</span></li>
                    <li><span>商业保理</span></li>
                    <li><span>保险经纪</span></li>
                    <li><span>保险公估</span></li>
                    <li><span>保险代理</span></li>
                    <li><span>科技</span></li>
                    <li><span>电子技术</span></li>
                    <li><span>软件开发</span></li>
                    <li><span>技术研究</span></li>
                    <li><span>事务所</span></li>
                    <li><span>医疗</span></li>
                    <li><span>医院</span></li>
                    <li><span>文化</span></li>
                    <li><span>影视</span></li>
                    <li><span>艺术</span></li>
                    <li><span>家政</span></li>
                    <li><span>广告</span></li>
                    <li><span>征信</span></li>
                    <li><span>设计</span></li>
                    <li><span>经贸</span></li>
                    <li><span>商贸</span></li>
                    <li><span>销售</span></li>
                    <li><span>电子</span></li>
                    <li><span>电子商务</span></li>
                    <li><span>研究院</span></li>
                    <li><span>教育</span></li>
                    <li><span>房地产</span></li>
                    <li><span>置业</span></li>
                    <li><span>工程</span></li>
                    <li><span>劳务</span></li>
                    <li><span>汽车</span></li>
                    <li><span>人力资源</span></li>
                    <li><span>装饰</span></li>
                </ul>
            </div>
        </div>
        <script>
            function search() {
                var search=$(".input-box").val();
                if(search==""){
                    var location=$(".sel-area .active").children('span').attr('data-value');
                    var stamp=$(".sel-stamp ul .active").children('span').text();
                }else {
                    var location="";
                    var stamp="";
                }


                $.post("{:\\think\\Url::build('index/Guquan/search')}",{location:location,stamp:stamp,search:search},function(msg){
                    var html="";
                    for(var i=0;i<msg.length;i++) {
                        html += '<li > <a href="guquanDetail?projectId='+msg[i].projectId+'"> <div><img src="__STATIC__/images/guquan_img.png" ></div> <div> <span style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 196px;">'+msg[i].projectName+'</span> <span>成立时间：<?php echo date("Y-m-d",strtotime('+msg[i].establishmentDateTime+'));?></span> <span>纳税类型：'+msg[i].taxType+' </span> <span>地址：'+msg[i].areaName+'</span> <span>价格：<label>{if ceil('+msg[i].price+'<10000)}'+msg[i].price+'{elseif '+msg[i].price+'>=10000 && '+msg[i].price+'<100000000}<?php echo ceil('+msg[i].price+'/100)/100?>万{elseif '+msg[i].price+'>=100000000}<?php echo ceil('+msg[i].price+'/1000000)/100?>亿{/if}元</label></span> </div> </a> </li>'
                    }
                    $(".guquan_tab ul").html(html)
                })

            }
        function getCity(str) {
            $.post("{:\\think\\Url::build('index/Guquan/getCity')}",{province:str},function(msg){
                var html="";
                var htm="";
                for(var j=0;j<msg.length;j++) {
                    html += '<li><span onclick=getArea($(this).attr("data-value")); data-value='+msg[j].areaId+'>'+msg[j].areaName+'</span></li>'
                    for(var i=0;i<msg[j].area.length;i++) {
                        htm += '<li><span data-value='+msg[j].area[i].areaId+'>'+msg[j].area[i].areaName+'</span></li>'
                    }
                    $(".sel-area").html(htm);
                }
                $(".sel-city").html(html);
            })
        }
        function getArea(str) {
            $.post("{:\\think\\Url::build('index/Guquan/getArea')}",{city:str},function(msg){
                var html="";
                for(var j=0;j<msg.length;j++) {
                    html += '<li><span data-value='+msg[j].areaId+'>'+msg[j].areaName+'</span></li>'
                }
                $(".sel-area").html(html);
            })
        }


        </script>
       <div class="guquan_tab">
           <ul>
               {volist name="data" id="v"}
               <li >
                   <a href="guquanDetail?projectId={$v.projectId}">
                      <div><img src="__STATIC__/images/guquan_img.png" ></div>
                      <div>
                          <span style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 196px;">{$v.projectName}</span>
                          <span>成立时间：<?php echo date("Y-m-d",strtotime($v['establishmentDateTime']));?></span>
                          <span>纳税类型：{$v.taxType} </span>
                          <span>地址：{$v.areaName}</span>
                          <span>价格：<label>{if ceil($v.price<10000)}{$v.price}{elseif $v.price>=10000 && $v.price<100000000}<?php echo ceil($v['price']/100)/100?>万{elseif $v.price>=100000000}<?php echo ceil($v['price']/1000000)/100?>亿{/if}元</label></span>

                      </div>
                  </a>
               </li>
               {/volist}
           </ul>
       </div>
    </div>

</section>
<script type="text/javascript">
    var page=1;
    var finished=0;
    var sover=0;

    //如果屏幕未到整屏自动加载下一页补满
    var setdefult=setInterval(function (){
        if(sover==1)
            clearInterval(setdefult);
        else if($(".guquan_tab ul").height()<$(window).height())
            loadmore($(window));
        else
            clearInterval(setdefult);
    },500);

    //加载完
    function loadover(){
        if(sover==1)
        {
            var overtext="Duang～到底了";
            $(".loadmore").remove();
            if($(".loadover").length>0)
            {
                $(".loadover span").eq(0).html(overtext);
            }
            else
            {
                var txt='<div class="loadover" style="text-align: center"><span >'+overtext+'</span></div>'
                $("body").append(txt);
            }
        }
    }

    //加载更多
    var vid=0;

    function loadmore(obj){
        if(finished==0 && sover==0)
        {
            var scrollTop = $(obj).scrollTop();
            var scrollHeight = $(document).height();
            var windowHeight = $(obj).height();
            if($(".loadmore").length==0)
            {
                var txt='<div class="loadmore"  style="text-align: center"><span class="loading"></span>加载中..</div>'
                $("body").append(txt);
            }
            var search=$(".input-box").val();
            if(search==""){
                var location=$(".sel-area .active").children('span').attr('data-value');
                var stamp=$(".sel-stamp ul .active").children('span').text();
            }else {
                var location="";
                var stamp="";
            }
            if (scrollTop >= scrollHeight -windowHeight ) {
                //此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
                //防止未加载完再次执行
                $.ajax({
                    type: 'GET',
                    url: '/index/Guquan/append?location='+location+'&num='+page+'&stamp='+stamp+'&search='+search,
                    dataType: 'json',
                    success: function(data){
                        console.log(data);
                        if(data=="")
                        {
                            sover = 1;
                            loadover();
                            if (page == 1) {
                                $("#no_msg").removeClass("hidden");
                                $(".loadover").remove();
                            }
                        }
                        else
                        {
                            var result = ''
                            for(var i = 0; i < data.length; i++){
                                result+='<li > <a href="guquanDetail?projectId='+data[i].projectId+'"> <div><img src="__STATIC__/images/guquan_img.png" ></div> <div> <span style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 196px;">'+data[i].projectName+'</span> <span>成立时间：<?php echo date("Y-m-d",strtotime('+data[i].establishmentDateTime+'));?></span> <span>纳税类型：'+data[i].taxType+' </span> <span>地址：'+data[i].areaName+'</span> <span>价格：<label>{if ceil('+data[i].price+'<10000)}'+data[i].price+'{elseif '+data[i].price+'>=10000 && '+data[i].price+'<100000000}<?php echo ceil('+data[i].price+'/100)/100?>万{elseif '+data[i].price+'>=100000000}<?php echo ceil('+data[i].price+'/1000000)/100?>亿{/if}元</label></span> </div> </a> </li>'
                            }

                            // 为了测试，延迟1秒加载
                            setTimeout(function(){
                                $(".loadmore").remove();
                                $('.guquan_tab ul').append(result);
                                page+=1;
                                finished=0;
                                //最后一页
                                if(page==10)
                                {
                                    sover=1;
                                    loadover();
                                }
                            });
                        }
                    },
                    error: function(xhr, type){
                        alert('Ajax error!');
                    }
                });
            }
        }
    }
    //页面滚动执行事件
    $(window).scroll(function (){
        loadmore($(this));
    });
</script>
</body>

</html>